<template>
    <div class="input">
            <div class="enter">
                <input type="text" placeholder="添加要做的事儿..." v-model="ipt">
            </div>
            
            <button type="submit" @click="submit" class="submit-btn">
                <span>提交</span>
            </button>
        </div>
</template>


<script setup>
import {ref,defineEmits} from "vue"
let ipt = ref("")
let emits = defineEmits(['add'])

let submit = function(){
    emits('add',ipt.value)
    ipt.value = ''
    
}

</script>







<style scoped>
.input input{
    background: transparent;
    border: 0;
    border-bottom: 3px dashed #00bfff;
    font-size: 18px;
    outline: 0;
    padding: 5px 0 3px;
    width: 100%;
   
}
.enter{
    width: 300px;
    margin-right: 60px;
}
    .submit-btn {
       
        outline: none;
        border: none;
        background-color: transparent;
        cursor: pointer;
        position: relative;
        transform: rotate(4deg);
        border-radius: 6px;
        transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
    }

    .submit-btn span {
        position: relative;
        display: block;
        font-size: 16.5px;
        padding: 0.34em 0.84em;
        border: 2px solid #494a4b;
        border-radius: inherit;
        background-color: #fff;
    }

    .submit-btn:before {
        position: absolute;
        left: 0px;
        top: 0px;
        content: "";
        width: 100%;
        height: 100%;
        transform: scaleY(1.1);
        border: 1px solid #494a4b;
        border-radius: inherit;
        transform-origin: top;
        background-color: #fe7345;
        transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
    }


    .input{
        width: 100%;
        display: flex;
        justify-content: center;

    }

</style>